<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: YuanYu
 * @LastEditTime: 2021-09-24 11:23:30
-->
<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- 中部 -->
    <div class="articleContent">
      <div class="wrapper">
        <div class="titleBody">
          <div class="articleTitle">{{ articleDataById.title }}</div>
          <div class="name">作者：{{ user.realname }}</div>
          <div class="time">
            发布时间：{{ Number(articleDataById.publishTime) | fmtDate }}
            <span
              class="el-icon-yydianzan"
              @click="toThumbUp(articleDataById)"
            ></span>
            {{ articleDataById.thumpUp }}
          </div>
          <div class="article" v-html="articleDataById.content">
            {{ articleDataById.content }}
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { get } from "../utils/request";
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      articleData: {},
      articleDataById: {},
      user: {},
    };
  },
  methods: {
    getArticleDataById() {
      get("/index/article/findById", { id: this.articleData.id }).then(
        (res) => {
          // console.log(res);
          this.articleDataById = res.data;
          this.user = this.articleDataById.baseUser;
        }
      );
    },
    open1() {
      this.$notify({
        title: "点赞成功",
        // message: "这是一条成功的提示消息",
        type: "success",
      });
    },
    toThumbUp(articleDataById) {
      get("/index/article/thumbUp", { id: this.articleDataById.id }).then(
        (res) => {
          // console.log(res);
          this.getArticleDataById();
          this.open1();
        }
      );
    },
  },
  created() {
    this.articleData = this.$route.query;
    this.getArticleDataById();
  },
};
</script>

<style lang="scss">
.articleContent {
  background-color: white;
  .wrapper {
    padding-top: 10px;
    min-height: 400px;
    .titleBody {
      .articleTitle {
        text-align: center;
        font-size: 20px;
        line-height: 1.5em;
      }
      .name {
        text-align: center;
        line-height: 1.5em;
      }
      .time {
        text-align: center;
        line-height: 1.5em;
        .el-icon-yydianzan {
          font-size: 25px;
          margin-left: 10px;
          cursor: pointer;
        }
      }
      .article {
        background-color: white;
      }
    }
  }
}
</style>